<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01初始Vue</title>
    <!-- 引入开发版本的Vue -->
    <script src="./js//vue.js"></script>
  </head>
  <body>
    <!-- 
      1.先创建一个Vue实例，并且要传入一个配置对象
      2.容器里面的代码仍然符合html规范，只不过加入了一些特殊的Vue语法
      3.容器里面的代码被称为【Vue模板】
      4.容器和Vue实例之间必须是一对一的关系
      5.真实开发中只有一个Vue实例，并且会配合Vue组件一起使用
      6.{{xxx}}中的xxx要写【js表达式】，并且xxx可以自动读取到data中的所有属性
      7.一旦data中的数据改变了，那么页面中用到改数据的地方也会跟着自动更新

      【注意区分js代码和js表达式】   js表达式是特殊的js语法
      1.js表达式：一个表达式可以产生一个值，值可以放到任何需要值的地方
      例如    1.a
              2.a+b
              3.function(a)函数
              4.x === y? "a":"b" 三元运算符
      2.js代码:js语法，if()和for()
     -->

    <!-- 准备一个容器 放东西 -->
    <div id="root">
      <h1>姓名:{{name}},年龄:{{age}}</h1>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false; //关闭生产环境提示
      // 创建Vue实例
      new Vue({
        el: '#root', //指对哪一个容器进行操作，值通常为css选择器字符串，id用#，class用.
        //data用于存储数据，数据供上面的容器使用，这里data为一个对象，后面会写成函数
        data: {
          name: '路飞',
          age: 18,
        },
      });
    </script>
  </body>
</html>
